@charset "utf-8";
/**
*@author       wuwg
*@createTime   2018/05/24
*@updateTime   2018/05/24
*@description
*@rule
 */
@import '../../../config/config.less';

@css-prefix-scroll: ~"@{css-prefix}scroll";
@css-prefix-scroll-track-h: ~"@{css-prefix}scroll-track-h";
@css-prefix-scroll-track-v: ~"@{css-prefix}scroll-track-v";
@css-prefix-scroll-bar: ~"@{css-prefix}scroll-bar";
@css-prefix-scroll-area: ~"@{css-prefix}scroll-area";
@css-prefix-scrollbar-transition: ~"@{css-prefix}scrollbar-transition";
// 过渡动画
.@{css-prefix-scrollbar-transition} {
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

/**
* 垂直滚动条
* 记住容器必须指定容器高（！important） width:400px;height:300px;
*/
.@{css-prefix-scroll} {
    position: relative;
    overflow: hidden;
    background: #fff;
    &:hover,
    &.show {
        .@{css-prefix-scroll-track-h}, .@{css-prefix-scroll-track-v} {
            opacity: 1;
            background-color: rgba(0, 0, 0, 0.1);
        }
    }

    // 滚动条 track
    .@{css-prefix-scroll-track-h}, .@{css-prefix-scroll-track-v} {
        position: absolute;
        opacity: 0;
        background-color: transparent;
        // 滚动条bar
        .@{css-prefix-scroll-bar} {
            position: absolute;
            border-radius: 5px;
            cursor: default;
            background-color: rgba(33, 112, 177, 0.8);
            // hover
            &:hover {
                background-color: rgba(33, 112, 177, 1);
            }
            // presss
            &.pressed, &.pressed:hover {
                background-color: rgba(33, 112, 177, 1);
            }
        }
    }
    // 滚动条 track   horizontal
    .@{css-prefix-scroll-track-h} {
        left: 1%;
        bottom: 0;
        width: 98%;
        height: 6px;
        // 滚动条    horizontal
        .@{css-prefix-scroll-bar} {
            height: 100%;
        }
    }

    // 滚动条 track   vertical
    .@{css-prefix-scroll-track-v} {
        top: 1%;
        right: 0;
        width: 6px;
        height: 98%;
        // 滚动条    vertical
        .@{css-prefix-scroll-bar} {
            width: 100%;
        }
    }
    // 滚动区域
    .@{css-prefix-scroll-area} {
        min-width: 100%;
        overflow: hidden;
        &:after {
            content: "";
            clear: both;
            display: block;
        }
    }
}
